
<script src="lib/js/zepto.min.js"></script>

<script>
    //fn
    (function ($) {
        "use strict";

        // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
        // ============================================================

        function transitionEnd() {
            var el = document.createElement('bootstrap')

            var transEndEventNames = {
                'WebkitTransition': 'webkitTransitionEnd'
            , 'MozTransition': 'transitionend'
            , 'OTransition': 'oTransitionEnd otransitionend'
            , 'transition': 'transitionend'
            }

            for (var name in transEndEventNames) {
                if (el.style[name] !== undefined) {
                    return { end: transEndEventNames[name] }
                }
            }
        }

        // http://blog.alexmaccaw.com/css-transitions
        $.fn.emulateTransitionEnd = function (duration) {
            var called = false, $el = this
            $(this).one($.support.transition.end, function () { called = true })
            var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
            setTimeout(callback, duration)
            return this
        }

        $(function () {
            $.support.transition = transitionEnd()
        })

    })(Zepto);

    (function ($) {
        //dir : next or prev
        Zepto.fn.carousel = function (dir, selfRun) {
            //var actTermi2 = {
            //    next: "translate3d(-100%,0,0)",
            //    prev: "translate3d(100%,0,0)"
            //};
            var actTermi = {
                next: "left",
                prev: "right"
            };
            var $this = this;
            var $item_set = $this.find(".item");
            var $act = $this.find(".carousel-inner .active");
            var $expect = (dir == "next") ? $act.next() : $act.prev();
            var $indicator = $this.find(".carousel-indicators");
            var indx;
            if ($expect.length == 0) {
                //console.log($expect.length);
                $expect = (dir == "next") ? $item_set.first() : $item_set.last();
            }
            //添加next or prev 样式
            $expect.addClass(dir);
            //执行动画
            if (selfRun) {
                $expect[0].offsetWidth; // force reflow
            }
            
            $expect.addClass("toActive");
            $act.addClass(actTermi[dir]);
            //更新指示器的点的位置
            indx = $item_set.index($expect);
            $indicator.find('.active').removeClass('active');
            $indicator.children().eq(indx).addClass('active');
            //等待css动画完成
            $act.one($.support.transition.end, function () {
                $act.removeClass(['active', actTermi[dir]].join(' '));
                $expect.removeClass(['toActive', dir].join(' ')).addClass("active");
            });

        }
    })(Zepto);
    //点击事件
    (function ($) {
        $(document).ready(function () {
            $(".plusBtn").click(function () {
                $(this).parent().toggleClass("plusCollapse").toggleClass("expand");
                $(".bgFilter").toggleClass("filterHide");
            });
            $(".bgFilter").click(function () {
                $(this).toggleClass("filterHide");
                $(".plusBtn").parent().toggleClass("plusCollapse").toggleClass("expand");
            });
        });
    })(Zepto);

    var mylib = {};
    function extMylib(lib, fnName, fn) {
        lib[fnName] = fn;
    }
    (function ($, window, undefined) {
        function swipeIt(obj, selfRun) {
            var that = this;
            this.startX;
            this.startY;
            this.nowX = 0;
            this.nowY = 0;
            this.maxX = 0;
            this.maxY = 0;
            this.distX;
            this.distY;
            this.direction;
            this.bIsSwipe = false;
            //用于等待css动画结束
            this.bIsDurTrains = false;
            this.imgW = $(obj).width();;//图片宽度
            this.$act;
            this.$actFlow;
            this.interval;
            //----init:----//
            //event bind:
            obj.addEventListener('touchstart', function (event) {
                that.eTouchstart(event);
            }, false);
            obj.addEventListener('touchmove', function (event) {
                that.eTouchmove(event, obj);

            }, false);
            obj.addEventListener('touchend', function (event) {
                that.eTouchEnd(event, obj);
            }, false);
            if (selfRun) {
                this.interval = setInterval(function () {
                    $(obj).carousel("next", true);
                }, 5000);
            }
            //----init END----//
        }
        swipeIt.prototype = {
            //事件handler
            eTouchstart:function (e) {
                if (!e.touches.length) { return; }
                var oTouch = e.touches[0];
                //如果没有进行左右滑动,则初始化
                !this.bIsSwipe && this.fSwipeStart(oTouch);
                clearInterval(this.interval);
            },
            eTouchmove:function (e, obj) {
                if (this.bIsDurTrains) { return; }
                if (e.touches.length != 1) { return; }
                var oTouch = e.touches[0];
                this.nowX = oTouch.screenX;
                this.nowY = oTouch.screenY;
                this.distX = this.nowX - this.startX;
                this.distY = this.nowY - this.startY;
                //如果没正在进行滑动,则进行监测
                if (!this.bIsSwipe && this.maxY < 15) {
                    this.bIsSwipe = this.fCheckTouch(obj);
                }
                //滑动
                this.bIsSwipe && this.fSwiping(e);

            },
            eTouchEnd:function (e, obj) {
                //关闭左右滑动状态
                this.fSwipeEnd(obj);
                this.bIsSwipe = false;

                if (this.interval) {
                    this.interval = setInterval(function () {
                        $(obj).carousel("next", true);
                    }, 5000);
                }
            },
            //初始化
            fSwipeStart:function (oTouch) {
                this.nowX = 0, this.nowY = 0, this.maxX = 0, this.maxY = 0;
                this.startX = oTouch.screenX;
                this.startY = oTouch.screenY;
            },
            //滑动执行
            fSwiping: function (e) {
                e.preventDefault();
                var distX = this.distX;
                var imgW = this.imgW;
                var iW;
                if (distX > 0) {
                    //右滑动
                    iW = (distX - imgW) / imgW * 100;
                } else {
                    //左滑动
                    iW = (imgW + distX) / imgW * 100;
                }
                var pec = distX / imgW * 100

                var actValue = 'translate3d(' + pec + '%,0,0)';
                var actFlowValue = 'translate3d(' + iW + '%,0,0)';
                this.$act.css({
                    '-webkit-transform': actValue,
                    '-moz-transform': actValue
                });
                this.$actFlow.css({
                    '-webkit-transform': actFlowValue,
                    '-moz-transform': actFlowValue
                });
            },
            //结束
            fSwipeEnd: function (obj) {
                var that = this;
                var $act = this.$act;
                var $actFlow = this.$actFlow;
                if (this.bIsSwipe) {
                    $act.removeClass("manal").removeAttr("style");
                    $actFlow.removeClass("manal").removeAttr("style");
                    $(obj).carousel(this.direction);

                    this.bIsDurTrains = true;
                    $act.one($.support.transition.end, function () {
                        that.bIsDurTrains = false;
                    })
                }
            },
            swipeInit: function (obj) {
                this.$act = $(obj).find(".carousel-inner .active");
                this.$act.addClass("manal");
                if (this.distX > 0) {
                    //右滑动,动画左移
                    this.direction = "prev";
                } else {
                    //左滑动
                    this.direction = "next";
                }
                this.$actFlow = this.fGetFlowSlide(this.$act, this.direction);
                this.$actFlow.addClass("manal " + this.direction);
            },
            //监测是否左右滑动
            fCheckTouch: function (obj) {
                this.maxY = this.maxY > Math.abs(this.distY) ? this.maxY : Math.abs(this.distY);
                var abs_distX = Math.abs(this.distX);
                if (abs_distX > 2 && abs_distX > (this.maxY)) {
                    this.swipeInit(obj);
                    return true;
                } else {
                    return false;
                }
            },
            fGetFlowSlide: function(act, direction) {
                var $expect;
                //获取下一个
                if (direction == "next") {
                    $expect = $(act).next();
                } else {
                    $expect = $(act).prev();
                }
                //如果没有下一个,则调第一个
                if ($expect.length != 0) {
                    return $expect;
                } else if (direction == "next") {
                    return $(act).parent().find(".item").first();
                } else {
                    return $(act).parent().find(".item").last();
                }
            }
            
        };
        extMylib(mylib, "swipe", swipeIt);
    })(Zepto, window, undefined);
    (function ($) {
        var obanner = document.getElementById('carousel_banner');
        if (obanner) {
            var ooo = new mylib.swipe(obanner, true);
        }
        var oCatgry2 = document.getElementById('act_catgry2');
        if (oCatgry2) { var ooo2 = new mylib.swipe(oCatgry2, false); }
        var oCatgry3 = document.getElementById('act_catgry3');
        if (oCatgry3) { var ooo3 = new mylib.swipe(oCatgry3, false); }

    })(Zepto);



</script>
